import styled from "styled-components"
import useMoney from '../useMoney';

const Wrapper=styled.div`
    margin-top:10px;
    padding:5px;
    >.list{
        >.title{
            display:flex;
            padding:5px;
            background-color: rgba(235, 231, 231, 0.5);
            >.delete{
                margin-left:20px;
            }
        }
        >.content{
            display:flex;
            margin-bottom:10px;
            margin-top:10px;
            >.note{
                flex-grow:1;
                overflow:auto;
            }
            >.theme{
                margin-right:10px;
            }
        }
    }
`
type money={
    theme:string,
    note:string,
    money:number,
}
type value={
    [date:string]:money;
}
type TProp={
    money:value[],
    onChange:()=>void,
}

const HistoryMoney=(props:TProp)=>{
    const {rmMoney}=useMoney()
    return (
        <Wrapper>
            {
                props.money.map((items,index)=>{
                    return (
                        <div className="list" key={index}>
                            <div className="title">
                                <div >{Object.keys(items)[0]}</div>
                                <div className="delete" onClick={()=>{
                                    rmMoney(index)
                                    props.onChange()
                                }}>删除</div>
                            </div>
                            <div className="content">
                                <div className="note">{items[Object.keys(items)[0]].note}</div>
                                <div className="theme">{items[Object.keys(items)[0]].theme}</div>
                                <div>{items[Object.keys(items)[0]].money}</div>
                            </div>
                            
                        </div>
                    ) 
                })
            }
            
            
        </Wrapper>
    )
}
export default HistoryMoney